<script setup>
import { ref, computed } from 'vue';
import mitt from 'mitt';
import Cart from './components/Cart.vue';

const emitter = mitt();

const name = "hello vue";
const activeIndex = "1";
const isLoggedIn = ref(false);
const username = ref('');

const productList = [
    { id: '1', type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: '../../../public/images/product01.png' },
    { id: '2', type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: '../../../public/images/product02.png' },
    { id: '3', type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: '../../../public/images/product03.png' },
    { id: '4', type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: '../../../public/images/product04.png' },
    { id: '5', type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: '../../../public/images/product05.png' },
    { id: '6', type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: '../../../public/images/product06.png' },
    { id: '7', type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: '../../../public/images/product07.png' },
    { id: '8', type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: '../../../public/images/product08.png' },
];

const cartItems = ref([]);

const addToCard = (product) => {
    const existingItem = cartItems.value.find(item => item.id === product.id);
    if (existingItem) {
        if (existingItem.number < existingItem.stock) {
            existingItem.number++;
        }
    } else {
        cartItems.value.push({ ...product, number: 1 });
    }
    emitter.emit('cartUpdated', cartItems.value);
};

const removeFromCart = (item) => {
    const index = cartItems.value.indexOf(item);
    if (index >= 0) {
        cartItems.value.splice(index, 1);
    }
    emitter.emit('cartUpdated', cartItems.value);
};

const handleChange = (item) => {
    if (item.number <= 0) {
        removeFromCart(item);
    }
    emitter.emit('cartUpdated', cartItems.value);
};

const totalPrice = computed(() => {
    return cartItems.value.reduce((total, item) => {
        return total + item.price * item.number;
    }, 0);
});

const goToRegister = () => {
    console.log('跳转到注册页面');
};

const goToProfile = () => {
    console.log('跳转到个人资料页面');
};
</script>

<template>
    <div id="app">
        

        <el-container>
            <el-main>
                <el-row>
                    <el-col :sm="8" :xs="12" v-for="(product, i) in productList" :key="i">
                        <el-card>
                            <img :src="product.img" width="300px" height="300px" />
                            <p>{{product.name}}</p>
                            <p>价格: {{product.price}} 库存: {{product.stock}}</p>
                            <el-button @click="addToCard(product)">加入购物车</el-button>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
            <el-aside>
                <Cart :cartItems="cartItems" :totalPrice="totalPrice" @remove="removeFromCart" @change="handleChange" />
            </el-aside>
        </el-container>

        
    </div>
</template>

<style scoped>

</style>
    